<template>
	<view>
		<view class="u-demo-block">
			<u-swiper :list="list5" @change="e => current = e.current" :autoplay="false" height="250px">
				<view slot="indicator" class="indicator">
					<view class="indicator__dot" v-for="(item, index) in list5" :key="index"
						:class="[index === current && 'indicator__dot--active']">
					</view>
				</view>
			</u-swiper>
			<button @click="open()">1<u-popup :show="show" :round="10" mode="top" @close="close" @open="open">
				<view>
					<text>人生若只如初见，何事秋风悲画扇</text>
				</view>
			</u-popup></button>
			
			<view>

			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				list5: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],

			}
		},
		methods: {
		open() {
		        // console.log('open');
		      },
		      close() {
		        this.show = false
		        // console.log('close');
		      }
		}
	}
</script>

<style lang="scss">
	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}
</style>
